<template>
    <div class="uptopdiv hidebuttom">
        <div class="uptop" @click="clickevent"></div>
    </div>

</template>

<script setup> 
import { onMounted } from "vue";
const props = defineProps({
    itemClassName: {
        type: [String],
        default: ''
    },
    scrollStep: {
        type: Number,
        default: 10
    }
})
const emit = defineEmits(['clickEvent']);
let _eldom = null
let clickevent = () => {
    let el
    if (props.itemClassName === '')
        el = document.body
    else
        el = _eldom

    let scroll = el.scrollTop || document.body.scrollTop;

    function scrollToTop(el) {
        try {
            if (scroll > 0) {
                el.scrollTo(0, scroll);
                scroll -= props.scrollStep;
                if (typeof scrollToTop === 'function')
                    window.requestAnimationFrame(scrollToTop(el));

            } else {
                el.scrollTo(0, 0);
            }
        }
        catch {
            el.scrollTo(0, 0);
        }

    }
    if (scroll > 0)
        if (typeof scrollToTop === 'function')
            window.requestAnimationFrame(() => {
                scrollToTop(el)
            });
    emit('clickEvent')
}
let checkifScroll = () => {

    let _scrollTop = _eldom.scrollTop
    let _el = document.querySelector(`.uptopdiv`)
    if (_el)
        if (_scrollTop > 0) {
            _el.classList.remove('hidebuttom')
        }
        else {
            _el.classList.add('hidebuttom')
        }
    requestAnimationFrame(checkifScroll)
}
onMounted(() => {
    _eldom = document.querySelector(`.${props.itemClassName}`)
    if (_eldom) {
        _eldom.style.scrollBehavior = 'smooth'
        checkifScroll()
    }

})
</script>

<style lang="scss" scoped>
.hidebuttom {
    display: none;
}
.uptopdiv {
    width: 50px;
    height: 50px;
    bottom: 32px;
    right: 21px;
    position: fixed;
    overflow: hidden;

    .uptop {
        position: absolute;
        cursor: pointer;
        width: 50px;
        height: 50px;
        border-radius: 10px;
        background-color: var(--theme-color);

        &::after {
            top: 5px;
            position: absolute;
            margin: 0 auto;
            content: "";
            display: block;
            width: 12px;
            height: 12px;
            background-color: transparent;
            border-width: 6px 0px 0 6px;
            transform: rotate(45deg) translate(22px);
            border-style: solid;
            border-color: #fff;
            border-radius: 5px;
            animation: 3s arrow ease-in-out infinite;
        }
        @keyframes arrow {
            0% {
                transform: rotate(45deg) translate(42px, 19px);
            }
            50% {
                transform: rotate(45deg) translate(22px);
            }
            100% {
                transform: rotate(45deg) translate(2px, -21px);
            }
        }
    }
}
</style> 